<template>
  <div class="user-info-container">
    <div class="avatar">
      <img :src="userInfo.avatarPath" alt="头像">
    </div>
    <el-form ref="form"
             :model="userInfo"
             label-width="25%"
             label-position="left"
             size="mini">
      <el-form-item label="昵称">
        <el-input v-model="userInfo.nickname"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { AVATAR_PATH } from '../../../const'
  import path from 'path'
  import { getUserInfo } from '../../../api/api'

  export default {
    data() {
      return {
        userInfo: {
          avatarPath: '',
          nickname: ''
        }
      }
    },
    created() {
      const userInfo = this.$db.read().get('user').value()
      const userId = userInfo.userId
      if (userId) {
        this.getUserInfo(userId)
      }
    },
    methods: {
      getUserInfo(userId) {
        const params = { userId: userId }
        getUserInfo(params).then(response => {
          this.userInfo = response.data
          this.userInfo.avatarPath = path.join(AVATAR_PATH, 'own.jpg')
        })
      }
    }
  }
</script>
